<template>
  <div class="container">
    <div class='list'>
      <div v-if='no_data' class='flex-grow-1 flex-col flex-y-center flex-x-center noData'>
      <van-icon name="records" class="icon"></van-icon>
        <div>亲，没有收货地址哦~</div>
      </div>
      <div class='address-list flex-grow-1' v-else v-for="index in 2">
        <div class='flex-col address-item pd bg-white bd-bottom'>
          <div class='flex-row '>
            <div class='flex-grow-1'>{{item.realname}}</div>
            <div class='flex-grow-0'>{{item.mobile}}</div>
          </div>
          <div class='address-detail subtit pd-t-b'>
          sdaljdlajljsdljlkdsfjpadhd------{{index}}
          </div>
          <div class='flex-row border-top'>
            <div class='flex-grow-1'>
              <div><van-icon name="check" v-if="item.isdefault"/><van-icon name="checked" class="checked" v-else/>默认地址</div>
            </div>
            <div class='flex-grow-0 flex-row'>
              <div class='edit mg-r' @click='editAddress'>
                <van-icon name="edit" />编辑
              </div>
              <div @click='deleteAddress'>
                <van-icon name="delete" />删除
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-link to="addAddress"> <div class='btn pd flex-grow-0' bindtap='addAddress'>添加新地址</div></router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chosenAddressId: '1',
      no_data: true,
      item: {
        id: '1',
        realname: '张三',
        mobile: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isdefault: 1
      }
    }
  },

  methods: {
    editAddress() {
    },
    deleteAddress(item, index) {
    }
  }
}

</script>
<style lang="less" scoped>
.list{
     overflow-y: auto;
     position:fixed;
     bottom:2rem;
     left:0;
     width:100%;
     top:0;
}
.btn{
  width: 100%;
  text-align: center;
  background-color: #F75B93;
  color: #eee;
  position:fixed;
  bottom:0;
}
.checked{
	color:#F75B93;
}
.noData{
  height:50%;
  color:#999;
  .icon{
    font-size:2rem;
    margin-bottom:1rem;
  }
}
</style>
